<template>
  <div class="main">
    <div class="list1">
        <el-input class="input1" size="medium"  v-model="input1" placeholder="小区名称"></el-input>
        <el-input class="input2" size="medium" v-model="input2" placeholder="单元名称"></el-input>
        <el-date-picker class="date1"
        size="medium"
        v-model="date"
        align="right"
        type="date"
        placeholder="选择日期"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions">
        </el-date-picker>
        <el-select v-model="selectvalue" class="select1" size="medium" clearable placeholder="请选择">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-button class="button1" icon="el-icon-search" @click="searchmessage" ></el-button>
        <el-button class="button2" type="success" @click="towrite"><i class="el-icon-plus"></i>录入</el-button>
        <el-button class="button3" type="primary" @click="rewrite"><i class="el-icon-refresh-right"></i>重置</el-button>

    </div>
    <div class="list2">
        <el-table
      :data="housetable"
      v-loading="loading"
      border="true"
      
      style="width: 100%">
            <el-table-column
                prop="communityname"
                label="小区名称"
                width="293" 
                align="center"
                label-class-name="colu-title">
            </el-table-column>
            <el-table-column
                prop="unitname"
                label="单位名称"
                width="293"
                align="center">
            </el-table-column>
            <el-table-column
                prop="unitnum"
                label="栋数"
                width="176"
                align="center">
            </el-table-column>
            <el-table-column
                prop="createtime"
                label="建设时间"
                width="293"
                align="center">
            </el-table-column>
            <el-table-column
                prop="unitstatus"
                label="状态"
                width="190"
                align="center">
            </el-table-column>
            <el-table-column
                label="操作"
                width="220"
                align="center">
                <template slot-scope="scop">
                    <el-button type="primary" @click="toadd(scop.row.id)"  plain>详细</el-button>
                    <el-button type="danger" @click="delete1(scop.row.id)" plain>归档</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="list3">
        <el-pagination
        @size-change="handleSizeChange"
        background
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            input1:"",
            input2:"",
            date:"",
            housetable:[],
            loading:false,
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                    picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                    }
                }]
                },
            // 房屋信息载荷
            housepage:{
                pageNum: 10,
                currPage: 0
            },
            total:0,
            //选择器信息
            options: [{
                value: '1',
                label: '已建成'
                }, {
                value: '2',
                label: '未建成'
                }],
            selectvalue:"",
            //搜索信息
            search:{
                communityname: "",
                unitname: "",
                createDt: "",
                value: "",
                currPage: 1,
                pageNum: 10,
                token: "",
            },
        }
    },
    created(){
        this.gettoken()
        this.gethousemessage()
    },
    methods:{
        //初始化房屋单元信息
        gethousemessage(){
            this.loading = true
            this.$axios.get("http://community.byesame.com/house/gethouseList",{params:this.housepage}).then((res)=>{
                console.log("房屋信息",res.data)
                this.total = res.data.total
                setTimeout(() => {
                    this.loading = false
                }, 500);
                this.housetable = res.data.data
                for(let i =0;i<this.housetable.length;i++){
                    const date = new Date(this.housetable[i].createtime);  
                    const utcHours = date.getUTCHours();  
                    const beijingHours = (utcHours + 8) % 24;
                    const minutes = date.getUTCMinutes();  
                    const seconds = date.getUTCSeconds();
                    const formattedTime = `${date.getUTCFullYear()}-${date.getUTCMonth() + 1}-${date.getUTCDate()} ${beijingHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                    this.housetable[i].createtime = formattedTime;
                    if(this.housetable[i].unitstatus == 1){
                        this.housetable[i].unitstatus = "已建成"
                    }
                    else{
                        this.housetable[i].unitstatus = "未建成"
                    }
                }
            })
        },
        //得到房屋
        gethouse(){
            this.loading = true
            this.$axios.get("http://community.byesame.com/house/searchList",{params:this.search}).then((res)=>{
                console.log("房屋信息",res.data)
                setTimeout(() => {
                    this.loading = false
                }, 500);
                this.total = res.data.total
                this.housetable = res.data.data
                for(let i =0;i<this.housetable.length;i++){
                    const date = new Date(this.housetable[i].createtime);  
                    const utcHours = date.getUTCHours();  
                    const beijingHours = (utcHours + 8) % 24;
                    const minutes = date.getUTCMinutes();  
                    const seconds = date.getUTCSeconds();
                    const formattedTime = `${date.getUTCFullYear()}-${date.getUTCMonth() + 1}-${date.getUTCDate()} ${beijingHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                    this.housetable[i].createtime = formattedTime;
                    if(this.housetable[i].unitstatus == 1){
                        this.housetable[i].unitstatus = "已建成"
                    }
                    else{
                        this.housetable[i].unitstatus = "未建成"
                    }
                }
            })
        },
        //分页器方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.search.pageNum = val
            this.gethouse()
        },
        handleCurrentChange(val) {
            this.search.currPage = val;
            this.gethouse()
        },
        //得到token
        gettoken(){
            this.search.token = sessionStorage.getItem("token")
        },
        //搜索
        searchmessage(){
            this.search.communityname = this.input1
            this.search.unitname = this.input2
            this.search.createDt = this.date
            this.search.value = this.selectvalue
            this.search.currPage = 1
            this.gethouse()
        },
        //重置
        rewrite(){
            this.search.communityname = ""
            this.search.unitname = ""
            this.search.createDt = ""
            this.search.value = ""
            this.search.currPage = 1;
            this.input1="",
            this.input2="",
            this.date="",
            this.selectvalue = ""
            this.gethousemessage()
        },
        //归档
        delete1(id){
            console.log(111)
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                this.$axios.get("http://community.byesame.com/house/delunitList",{params:{
                    id:id,
                    token:this.search.token
                }}).then((res)=>{
                    console.log(res)
                    this.rewrite()
                })
                this.$message({
                    type: 'success',
                    message: '归档成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });

            
        },
        //房屋添加
        toadd(id){
            this.$router.push({
                path:"/house/add",
                query:{
                    flag:2,
                    id:id
                }
            })
        },
        //录入
        towrite(){
            this.$router.push({
                path:"/house/add",
                query:{
                    flag:1
                }
            })
        }
    },
}
</script>

<style scoped lang="scss">
.main{
    .list1{
        display: flex;
        padding-bottom:20px ;
        .input1{
            margin-right: 10px;
            flex: 10;
        }
        .input2{
            margin-right: 10px;
            flex: 10;
        }
        .date1{
            margin-right: 10px;
            flex: 10;
        }
        .select1{
            margin-right: 150px;
            flex: 10;
        }
        .button1{
            background-color: #409EFF;
            color: white;
            flex: 1;
        }
        .button2{
            flex: 3;
        }
        .button3{
            flex: 3;
        }
    }
    .list2{
        
    }
    .list3{
        text-align: right;
    }
}
::v-deep .el-table th{
    background-color: #EEF1F6;
}
::v-deep.el-table thead {
  font-weight: bold;
  font-size: 16px;
  color: black;
}
::v-deep .el-table tr{
    color: black;
    font-size: 14px;
}
</style>
